Soru & Cevap

Previous State'i kullanma amacımız tam olarak nedir?

19.10.2022 - 10:43

React 101 dersinde Previous State Tanımı bölümünde Previous State'i kullanma amacımızı tam olarak anlayamadım.

40 Görüntülenme

3 Cevap

Sitedeki sorulara cevap verebilmek için giriş yapın ya da üye olun.

Profile picture for user emrak37
emrak37
21.10.2022 - 11:24

Merhaba Selahattin,

previousState, useState'de tuttuğumuz verinin fonksiyon sonucu eklenecek yeni veri ile değişmemesi ve hali hazırda tutulan veriye yeni verinin eklenmesi veya güncellenmesi için kullanılmaktadır. 

Profile picture for user musahizir
musahizir
21.10.2022 - 08:19

const [count, setCount]= useState(0)

Bu bir sayaç olsun ve bu sayacı bir bir arttırmak istesem en basitinden yapacağım şey

setCount(count+1) 

olur. State değerini o an neyse 1 arttır der fakat dökümantasyon şöyle kullanmayı öneriyor

setCount(prev => prev+1)

Buradaki prev state değişmeden önceki değeri söylüyor, onu bir arttır diyorsun.

Bunu önermelerindeki neden ise

const testFunc = () => {

setCount(count+1)

setCount(count +1)

}

Böyle bir fonksiyon içerisinde iki kere kullanıldığında state'i iki defa arttırmak istememize rağmen sadece bir defa arttırır.

Yani prev diye aldığımız veri, state'in o anki verisine sağlıklı yoldan erişmemizi sağlıyor.

Profile picture for user burakhankatdar
burakhankatdar
20.10.2022 - 02:25

Previous state mantığı şu: 

useState yapısını obje ile açmaya çalıştığımızda -- [x, setX] = useState( {...} ); şeklinde kullanırız

Bu yapı içerisinde oluşturduğumuz object yapısını güncellemek istediğimizde içinde bulunan bilgiler örneğin

{ name: "Selahattin",

  surname: "Demir",

  gyScore: 35

olsun.

Bir butona bastığımızda buradaki soyad Demir yerine Gümüş olmasını istediğimizi varsayalım. Bu butonun onClick eventine 

<button onClick = { () => {

  setX({ surname:"Gümüş"})

}}></button>

yazmış olalım.

Burada setX() içerisinde süslü parantez açmamızın sebebi bir obje state açmamızdan ötürü. Burada setX() içersinde surname: "Gümüş" yazdığımızda ve bu butona tıkladığımızda ekranda bize yansıyacak görüntü sadece Gümüş olacaktır.

Çünkü biz setX içerisindeki objeye sadece soyad bilgisini verdik ve önceden oluşturduğumuz objenin içerisindekik bilgileri çekmeden güncellemesini sağladık. setX ile yeni gönderdiğimiz obje içerisinde sadece surname bilgisi bulunuyor. işte biz önceden oluşturduğumuz obje içindeki bilgileri çekebilmek ve bu çektiğimiz obje içindeki bilgileri güncellemek için previous state kullanıyoruz

Doğru kullanım:

<button onClick = { (prev) => {

  setX({ ...prev, surname:"Gümüş"})

}}></button>